import {CiImageOn} from "react-icons/ci"
import {BsEmojiSmileFill} from "react-icons/bs"
import {useRef, useState} from "react"
import {IoCloseSharp} from "react-icons/io5"
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
import {toast} from "react-hot-toast"

const CreatePutout = () => {
    const [text, setText] = useState("")
    const [img, setImg] = useState(null)
    const imgRef = useRef(null)
    
    const {data: authUser} = useQuery({
        queryKey: ["authUser"]
    })

    const queryClient = useQueryClient()

    const {
        mutate: createPutout,
        isPending,
        isError,
        error,
    } = useMutation({
        mutationFn: async ({text, img}) => {
            try {
                const res = await fetch("/api/putouts/create", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({text, img}),
                })

                const data = await res.json()
                if (!res.ok) {
                    throw new Error(data.error || "Soemthing went wrong")
                }
                return data
            }catch(error) {
                throw new Error("Error in CreatePutout.jsx: " + error)
            }
        },

        onSuccess: () => {
            setText("")
            setImg(null)
            toast.success("Putout created successfully")
            queryClient.invalidateQueries({queryKey: ["putouts"]})
        }
    })

    const handleSubmit = (e) => {
        e.preventDefault()
        createPutout({text, img})
    }

    const handleImgChange = (e) => {
        const file = e.target.files[0]
        if (file) {
            const reader = new FileReader()
            reader.onload = () => {
                setImg(reader.result)
            }
            reader.readAsDataURL(file)
        }
    }
    // TODO: fix this comp
    return (
        <div>
            
        </div>
    )
}

export default CreatePutout